<template>
	<uni-popup :type="props.type" :maskiSFilte="maskFilter" ref="myPopup" :key="maskFilter" v-if="isShow" class="popup"
		:style="maskFilter?'--backdrop-filter:blur(2px);':''">
		<view class="myPopup base_box_round" :style="popupStyle">
			<slot></slot>
		</view>
	</uni-popup>
</template>

<script setup>
	import store from "@/store/index.js"
	import {
		ref,
		watch,
		getCurrentInstance,
		computed
	} from "vue"
	const maskFilter = computed(() => store.state.setting.popupBg);
	const isShow = ref(true)
	let setTime = null
	watch(() => maskFilter.value, (n) => { //刷新
		if (setTime != null) {
			clearInterval(setTime)
		}
		isShow.value = false
		setTime = setTimeout(() => isShow.value = true, 100)
	})
	const popupStyle = computed(() => {
		return {
			...props.takeStyle,
			background: store.state.theme
		}
	});

	const props = defineProps({
		type: {
			type: String,
			default: "center"
		},
		takeStyle: {
			type: Object,
			default: () => {}
		}
	})
	let instance = getCurrentInstance();
	const myPopup = ref()
	// 导出方法 让父组件 ref. 使用
	const open = () => {
		if (myPopup.value) myPopup.value.open()
	}
	const close = () => {
		if (myPopup.value) myPopup.value.close()
	}
	defineExpose({
		open,
		close
	})
</script>

<style lang="scss" scoped>
	.popup {
		--backdrop-filter: blur(0px);

		::v-deep .mask {
			backdrop-filter: var(--backdrop-filter);
		}
	}
</style>